import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const EchartsDemo = ({title}) => {
    const chartRef = useRef(null);

    useEffect(() => {
        const chartDom = chartRef.current;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: title,
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [80, 90, 70],
                },
            ],
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    });

    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '500px', height: '400px' }} />
        </div>

    );
};

export default EchartsDemo;
